<template>
    <div class="box">
      <div class="sights-title">
        <ul>
          <li :class="{active:isActive === index}" v-for="(item , index) in items" :key="index" @click="isActive = index">
            {{item.type}}
          </li>
        </ul>
      </div>
      <div class="sights-list">
        <ul>
          <li v-for="(item , index) in items" :key="index" v-show="isActive === index">
            <navigator v-for="(e , key) in item.detalis" :key="key" class="list-details">
              <img :src="e.imgSrc" :alt="e.name"  mode="widthFix">
              <div>
                <p>{{e.name}}</p>
                <span>{{e.summary}}</span>
              </div>
            </navigator>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        isActive:0,
        items:[
          {
            type:"田园风光",
            detalis:[
              {name:'嶂石岩风光',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...', imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg'},
              {name:'田园风光',imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...全球十大最美梯田最全球十大最美梯田最凶凶...',}
            ],
          },
          {
            type:"民俗文化",
            detalis:[
              {name:'嶂石岩风光',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...', imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg'},
              {name:'嶂石岩风光',imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...全球十大最美梯田最全球十大最美梯田最凶凶...',}
            ],
          },
          {
            type:"田园风光",
            detalis:[
              {name:'嶂石岩风光',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...', imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg'},
              {name:'田园风光',imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...全球十大最美梯田最全球十大最美梯田最凶凶...',}
            ],
          },
          {
            type:"民俗酒店",
            detalis:[
              {name:'嶂石岩风光',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...', imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg'},
              {name:'田园风光',imgSrc:'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',summary:'全球十大最美梯田最全球十大最美梯田最凶凶...全球十大最美梯田最全球十大最美梯田最凶凶...',}
            ],
          }
        ]
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../static/css/basis";
  @import "../../../static/css/sights";
  .box{
    padding: 20rpx 0;
  }
  .sights-title {
    ul {
      width: 100%;
      white-space: nowrap;
      overflow-y: auto;
      li{
        padding: 10rpx 30rpx;
        display: inline-block;
        font-size: 32rpx;
        color: #666;
        &.active {
          position: relative;
          color: $colorGreen;
          &:before {
            content: "";
            position: absolute;
            width:60rpx;
            height:6rpx;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background:$colorGreen;
            border-radius:2rpx;
          }
        }
      }
    }
  }
</style>
